<template>
	<view class="container">
		<view class="diy-search">
			<view class="inner">
				<text class="search-icon iconfont icon-search"></text>
				<input placeholder-style="color:#bbb;font-size:12px;" v-model="searchVal" type="text" placeholder="川美研学" />
				<view class="search_btn" @click="toSearch()">搜索</view>
			</view>
		</view>
		<block v-if="!isSearch">
			<view class="title">搜索历史</view>
			<view class="paimingbox">
				<view :class="{ pmitem: true, iscolor: idx < 3 }" v-for="(t, idx) in topList" :key="idx" @click="toSearch(t.keyword)"
					>{{ idx + 1 }}.{{ t.keyword }}
					<image
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/17340108519454jSAIGBDBypN973d6b0e52ff62baf64e54de103bbac8.png"
						v-if="idx < 3"
					/>
				</view>
			</view>
		</block>
		<block v-if="isSearch">
			<view class="title">搜索结果</view>
			<view class="searchlist">
				<view class="ltitem" v-for="(t, idx) in dataList" :key="idx" @click="toJoin(t.id)">
					<image :src="t.coverImage" mode="aspectFill"></image>
					<view class="itright">
						<view class="top1">{{ t.goodsName }}</view>
						<view class="top2">{{ t.showTime }}</view>
						<view class="top3">{{ t.addressInfo }}</view>
						<view class="top4">{{ t.aimPeople }}</view>
					</view>
				</view>
				<view v-if="dataList.length == 0" style="margin-top: 30rpx; text-align: center">暂无数据 </view>
			</view>
		</block>
	</view>
</template>

<script>
import { searchTop, searchProject } from '@/api/yanxue/user.js'
export default {
	data() {
		return {
			searchVal: '',
			topList: [],
			dataList: [],
			isSearch: false
		}
	},
	created() {
		this.getsearchTop()
	},
	methods: {
		toJoin(id) {
			console.log(id)
			this.$navTo('pagesA/yanxue/yanxue_detail?id=' + id)
		},
		toSearch(t) {
			this.searchVal = t ? t : '川美研学'
			this.isSearch = true
			searchProject({ keyword: this.searchVal, ifRecommend: false }).then(res => {
				this.dataList = res.result
			})
		},
		getsearchTop() {
			searchTop({ page: 1, rows: 10 }).then(res => {
				this.topList = res.result.list
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 0;
	background: #fff;
	height: 100vh;
	.title {
		margin: 40rpx 0 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #000000;
		padding: 0 24rpx;
	}
	.paimingbox {
		width: 100%;
		padding: 0 24rpx;
		.pmitem {
			height: 56rpx;
			padding: 0 30rpx;
			display: inline-block;
			background: #f4f4f4;
			border-radius: 28rpx;
			line-height: 56rpx;
			text-align: center;
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			margin: 0 25rpx 25rpx 0;
			image {
				width: 20rpx;
				height: 26rpx;
				margin-left: 10rpx;
			}
		}
		.iscolor {
			background: #a2ff00;
		}
	}
	.searchlist {
		width: 100%;
		padding: 0 24rpx;
		.ltitem {
			display: flex;
			width: 100%;
			height: 200rpx;
			margin: 40rpx 0;
			image {
				width: 142rpx;
				height: 198rpx;
				margin-right: 24rpx;
			}
			.itright {
				.top1 {
					font-family: HarmonyOS Sans SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000;
				}
				.top2 {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin: 23rpx 0;
				}
				.top3 {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
				.top4 {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-top: 23rpx;
				}
			}
		}
	}
}
.diy-search {
	background: #f1f1f2;
	// font-size: 26rpx;
	width: 706rpx;
	height: 68rpx;
	margin: 0 auto;
	border-radius: 68rpx;
	overflow: hidden;
	margin-bottom: 14rpx;
}

.inner {
	height: 68rpx;
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: 2px solid #f95513;
	padding: 0 20rpx;
	position: relative;
	border-radius: 68rpx;
	&.radius {
		border-radius: 10rpx;
	}

	&.round {
		border-radius: 68rpx;
	}
	.search-icon {
		margin-right: 8rpx;
		color: #f95513;
		font-weight: bold;
	}
	.search_btn {
		width: 102rpx;
		height: 48rpx;
		background: #a2ff00;
		border-radius: 24rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 10px;
		color: #010101;
		line-height: 48rpx;
		text-align: center;
		position: absolute;
		right: 8rpx;
	}
}

.search-input {
	height: 60rpx;
	line-height: 60rpx;
	color: #999;
	padding: 0 20rpx;
}
</style>
